<template>
  <el-container style="height:100vh">
    <el-aside width="200px">
      <el-header style="font-family:'幼圆'">瞰聆聚合推送平台</el-header>
      <el-menu router :default-openeds="['1']" active-text-color="#2C2F36">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>APP管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="/main/android">Android</el-menu-item>
            <el-menu-item index="/main/ios">IOS</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>开发工具
          </template>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>系统管理
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">用户管理</el-menu-item>
            <el-menu-item index="3-2">角色管理</el-menu-item>
            <el-menu-item index="3-2">部门管理</el-menu-item>
            <el-menu-item index="3-2">字典管理</el-menu-item>
            <el-menu-item index="3-2">菜单管理</el-menu-item>
            <el-menu-item index="3-2">登陆日志</el-menu-item>
            <el-menu-item index="3-2">业务日志</el-menu-item>
            <el-menu-item index="3-2">监控管理</el-menu-item>
            <el-menu-item index="3-2">通知管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-user"></i>商户管理
          </template>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-menu"></i>订单管理
          </template>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown @command="handleCommand">
          <i class="el-icon-user-solid" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="loginout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{username}}</span>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>


<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-dropdown{
  cursor: pointer;
}
.el-aside {
  color: #333;
  background-color: rgb(238, 241, 246);
}
.el-aside > .el-header {
  background-color: #3a3c48;
  color: #fff;
  text-align: center;
}
</style>

<script>
export default {
  data: function () {
    return {
      username: window.localStorage.getItem('username')
    }
  },
  methods: {
    handleCommand(command) {
      this.$router.push({
        path: '/login'
      })
    }
  },
};
</script>